<template>
    <div class="dzs-item">
        <template v-if="item.type == 'input'">
            <!-- 输入框 -->
            <el-input v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @input="changeVaule($event, item.key)">
                <template v-if="item.slots" :slot="item.slots.name">
                    {{ item.slots.text }}
                </template>
            </el-input>
            <span v-else class="dzs-suffix">{{ editValue }}</span>
        </template>
        <template v-if="item.type == 'select'">
            <!-- 选择框 -->
            <el-select v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @change="changeVaule($event, item.key)">
                <el-option style="padding : 0 6px;" v-for="(option, idx) in item.children"
                    :key="option.value + (idx).toString()" :label="option.label" :value="option.value"></el-option>
            </el-select>
            <span v-else class="dzs-suffix">{{ getSelectValue(editValue) }}</span>
        </template>
        <template v-if="item.type == 'number'">
            <!-- 数字输入框 -->
            <el-input-number v-if="status != 'details'" v-model="numberEditValue" v-bind="{ ...item.props }"
                @change="changeVaule($event, item.key)"></el-input-number>
            <span class="dzs-suffix" v-else>{{ numberEditValue }}</span>
        </template>
        <template v-if="item.type == 'date'">
            <!-- 日期选择器 -->
            <el-date-picker v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @change="changeVaule($event, item.key)"></el-date-picker>
            <span class="dzs-suffix" v-else>{{ editValue }}</span>
        </template>

        <template v-if="item.type == 'time'">
            <!-- 时间选择器 -->
            <el-time-picker v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @change="changeVaule($event, item.key)"></el-time-picker>
            <span class="dzs-suffix" v-else>{{ editValue }}</span>
        </template>

        <template v-if="item.type == 'timeSelect'">
            <!-- 时间选择器 代步进 -->
            <el-time-select v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @input="changeVaule($event, item.key)"></el-time-select>
            <span v-else class="dzs-suffix">{{ editValue }}</span>
        </template>

        <template v-if="item.type == 'color'">
            <!-- 颜色选择器 -->
            <el-color-picker v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @input="changeVaule($event, item.key)"></el-color-picker>
            <span v-else>
                <span class="details-color" :style="{ 'background-color': editValue }"></span>
                <span class="dzs-suffix">{{ editValue }}</span>
            </span>
        </template>

        <template v-if="item.type == 'switch'">
            <!-- 开关 -->
            <el-switch v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @change="changeVaule($event, item.key)"></el-switch>
            <span class="dzs-suffix" v-else>{{ getSwitchValue(editValue) }}</span>
        </template>

        <template v-if="item.type == 'checkbox'">
            <!-- 多选框 -->
            <el-checkbox-group v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @change="changeVaule($event, item.key)">
                <el-checkbox v-for="(option, idx) in item.children" v-bind="{ ...option.props }" :label="option.label"
                    :value="option.value"></el-checkbox>
            </el-checkbox-group>
            <span class="dzs-suffix" v-else>{{ getCheckboxValue(editValue) }}</span>
        </template>

        <template v-if="item.type == 'radio'">
            <!-- 单选框 -->
            <el-radio-group v-if="status != 'details'" v-model="editValue" v-bind="{ ...item.props }"
                @change="changeVaule($event, item.key)">
                <el-radio class="items" v-for="(option, idx) in item.children" v-bind="{ ...option.props }"
                    :key="(option.value).toString() + idx" :label="option.label" :value="option.value">
                </el-radio>
            </el-radio-group>
            <span class="dzs-suffix" v-else>{{ getRadioValue(editValue) }}</span>
        </template>

        <template v-if="item.type == 'uploadImg' && !inline">
            <!-- 上传图片 -->
            <dzs-upload-img :status="status" v-model:value="editValue" v-bind="{ ...item.props }"
                @change="changeVaule($event, item.key)"></dzs-upload-img>
        </template>

        <template v-if="item.type == 'uploadFile' && !inline">
            <!-- 上传文件 -->
            <dzs-upload-file :status="status" :isPhone="formBoxWidth <= 768" v-model:value="editValue"
                v-bind="{ ...item.props }" @change="changeVaule($event, item.key)"></dzs-upload-file>
        </template>

        <template v-if="item.type == 'editor' && !inline">
            <!-- 富文本组件 -->
            <dzs-editor v-if="status != 'details'" v-model:value="editValue" v-bind="{ ...item.props }"
                @save="changeVaule($event, item.key)" :show_save="false">
            </dzs-editor>
            <div v-else v-html="editValue" class="dzs-suffix"></div>
        </template>
        <div class="from-item-tips" v-if="getTips() && item.type != 'divider'">
            {{ getTips() }}
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import dzsUploadImg from '../../dzs-upload-img';
import dzsUploadFile from '../../dzs-upload-file';
import dzsEditor from '../../dzs-editor';
import type { formItemInstance } from "../@types";
const props = defineProps({
    item: {
        type: Object as () => formItemInstance,
        required: true,
    },
    value: {
        type: [String, Number, Boolean, Object, Array, Date],
        default: () => {
            return ''
        }
    },
    formBoxWidth: {
        type: Number,
        default: () => {
            return 0
        }
    },
    toolbar: {
        type: Array,
        default: () => {
            return []
        }
    },
    inline: {
        type: Boolean,
        default: () => {
            return false
        }
    },
    status: {
        type: String,
        default: () => {
            return 'add'
        }
    }
})

const emit = defineEmits(['change']);
const editValue = ref<any>("");
const numberEditValue = ref<any>(0);

watchEffect(() => {
    if (props.item.type == 'number') {
        numberEditValue.value = props.value ? Number(props.value) : 0;
        return;
    }
    editValue.value = props.value;
})

/**设置提示信息*/
const getTips = () => {
    if (props.item.props && props.item.props.tips) {
        return props.item.props.tips
    };
    return ""
}

/**改变值*/
const changeVaule = (value: any, keyPath: string) => {
    emit('change', value, keyPath);
}

/**获取switch的value*/
const getSwitchValue = (value: boolean | number | String) => {
    let switchValue = true;
    if (typeof value == 'boolean') {
        switchValue = value;
    } else if (typeof value == 'number') {
        switchValue = value > 0;
    } else if (typeof value == 'string') {
        switchValue = value == 'true';
    } else {
        return value;
    }
    let returnText = switchValue ? '是' : '否';
    if (props.item.props) {
        returnText = switchValue ? props.item.props['active-text'] || returnText : props.item.props['inactive-text'] || returnText;
    }
    return returnText;
}

/**获取选择框的值*/
const getSelectValue = (value: String | Array<string | number> | number) => {
    let returnText : string | number = '';
    if (!props.item.children) return value;
    if (!value) return ""
    const children = props.item.children;
    if (typeof value == 'string' || typeof value == 'number') {
        returnText = children.find((item: { label: string, value: string | number }) => item.value == value)?.label || value;
    }
    if (Array.isArray(value)) {
        returnText = value.map((item: string | number) => children.find((child: { label: string, value: string | number }) => child.value == item)?.label || item).join(',');
    }
    return returnText;
}

/**获取单选框的值*/
const getRadioValue = (value: String | number) => {
    let returnText : string | number = '';
    if (!props.item.children) return value;
    if (!value) return ""
    const children = props.item.children;
    returnText = children.find((item) => item.value == value)?.label || value as string;
    return returnText;
}

/**获取多选框的值*/
const getCheckboxValue = (value: Array<string | number>) => {
    let returnText = '';
    if (!props.item.children) return value;
    if (!value) return ""
    const children = props.item.children;
    returnText = value.map((item: string | number) => children.find((child) => child.value == item)?.label || item).join(',');
    return returnText;
}


</script>
<style lang="scss" scoped>
.dzs-item {
    width: 100%;

    .from-item-tips {
        font-size: 12px;
        color: #ccc;
        padding-top: 3px;
        line-height: 14px;
    }

    .details-color {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }
}
</style>